<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>电商大数据管理平台</title>
		<link rel="icon" href="icon.ico">
		<link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.css">
		<link rel="stylesheet" href="css/dashboard.css">
		<!--[if lt IE 9]>
			<script src="plugins/html5shiv/html5shiv.min.js"></script>
	    <script src="plugins/respond/respond.min.js"></script>
    <![endif]-->
	</head>

	<body>
		<div id="app">
			<nav class="navbar navbar-default navbar-fixed-top">
				<div class="container-fluid">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
						<a class="navbar-brand" href="#" style="font-size: x-large;"><strong><b>电商大数据管理平台</b> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong></a>
					</div>
					<navbars :acv="bnav"></navbars>
				</div>
			</nav>

			<div class="container-fluid">
				<div class="row">
					<div class="col-sm-3 col-md-2 sidebar">
						<fxnav fx="1"></fxnav>
					</div>
					<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
						<h2 style="color: #0D81F5;"><b>物流分析</b></h2>
						<div class="placeholders alert alert-info">
							<h4><img src="images/sx.png" style="margin-left: -24px;margin-top: -3px;">物流快递月收发数量汇总</h4>
							<button style="margin: 0 20px;" class="btn btn-primary pull-right" @click="dateChange()">确认</button>
							<form role="form" class="form-inline pull-right">
								<div class="form-group">
									<div class="form-group">
										<label for="year">年：</label>
										<select  v-model="years" name="address" id="year" class="form-control">
											<option :value="yearss.years" v-for="yearss in ym">{{yearss.years}}年</option>
										</select>
									</div>
								</div>
								<div class="form-group">
									<div class="form-group">
										<label for="mouth">月：</label>
										<select v-model="days" name="address" id="mouth" class="form-control">
											<option :value="'0'+n"  v-for="n in yearSelect(years)" >{{n}}月</option>			
										</select>
									</div>
								</div>
							</form>
						</div>
						<div style="text-align:center;">
							<h3 style="width: 90%;padding: 10px 0;">铜仁市各区县<span>{{years2}}年{{days2}}月</span>物流快递收发数量汇总</h3>
							<div style="width: 90%;padding: 5px 0 ;font-weight:bold;"><span>全市月发出总数：</span><span id="inputNum">0</span></div>
							<div style="width: 90%;padding: 0px 0;font-weight:bold;"><span>全市月发入总数：</span><span id="importNum">0</span></div>
							<div v-show="chart1show" id="chart1" style="width: 90%;height:650px;"></div>
							<div v-show="!(chart1show)" class="zanwu">暂无数据 </div>
						</div>
					</div>
				</div>
			</div>

		</div>
		<script src="plugins/jquery/jquery.min.js"></script>
		<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/echarts.min.js"></script>
		<script type="text/javascript" src="js/vue.min.js"></script>
		<script type="text/javascript" src="js/nav.js"></script>
		<script>
			new Vue({
				el: "#app",
				data: {
					bnav: {
						number: 2,
					},
					area: [],
					category1: [],
					category2: [],
					category3: [],
					category4: [],
					category5: [],
					category6: [],
					addr: [],
					inputNum:0,
					importNum:0,
					chart1show: true,
					years:2017,
					days:'01',
					years2:2017,
					days2:'01',
					ym:[]
				},
				computed: {
					getDateStr: function() {
						var myDate = new Date();
						var myFullyear = myDate.getFullYear();
						var myMouth = myDate.getMonth();
						if(myMouth == 0) {
							myMouth = "12";
							myFullyear = myFullyear - 1;
						}
						var myTime = myFullyear + "年" + myMouth + "月";
						return myTime;
					}
				},
				mounted: function() {
					this.getData();
					this.yearMonth();
				},
				methods: {
					yearSelect:function(years){
						var yms = this.ym.filter(function(element){
							return element.years == years;
						})
						var yo = yms[0] || {};
						return yo.months;
					},
					yearMonth:function(){
							var dates = new Date();
							var year = dates.getFullYear();
							var month = dates.getMonth()+1;
							var childs=[];
							if(year>=2017){
								for(var i = 0;i<=(year-2017);i++){
									if(i+2017<year){
										childs.push({years:2017+i,months:12})
									}else if(i+2017==year){
											childs.push({years:2017+i,months:month})
									}
								}
							}
							this.ym = childs;
	
					},
					dateChange:function(){
							
							if(this.years == "" && this.days ==""){
								this.getData();
							}else if(this.days!="" && this.years != ""){
								this.getData();
							}else{
									this.$message({
							          showClose: true,
							          message: "请補全年月！",
							          type: 'warning'
							        });
							}
						},
					getData: function() {
						var vm = this;
						vm.area = [];
						$.ajax({
							type: "get",
							url: "ebb/front/logistics/analysis?addressCode=520600000000&tradeStatisticsTime=" + vm.years+"-"+vm.days+"-28",
							//url: "mock/logistics_page.json",
							async: true,
							success: function(data) {
								vm.years2 = vm.years;
								vm.days2 = vm.days;
								if(data.toString().length > 4) {
									vm.category1 = data.monthOutAmounts;
									for(var i=0;i<vm.category1.length;i++){
									      vm.inputNum+=vm.category1[i];
									}
									$("#inputNum").html(vm.inputNum);
									vm.category2 = data.monthInAmounts;
									for(var i=0;i<vm.category2.length;i++){
									      vm.importNum+=vm.category2[i];
									}
									$("#importNum").html(vm.importNum);
									vm.category3 = data.yearOnYearsOutAmounts;
									vm.category4 = data.monthOnMonthsOutAmounts;
									vm.category5 = data.yearOnYearsInAmounts;
									vm.category6 = data.monthOnMonthsInAmounts;
									vm.addr = data.address;
									for(var i = 0; i < vm.addr.length; i++) {
										vm.area[i] = vm.addr[i].geoName;
									}
									vm.getTable();
								} else {
									vm.chart1show = false;
								}

							},
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                vm.chart1show = false;
                                if(XMLHttpRequest.status==401){
                                    //跳转到登录页,带上登录后的跳转地址redirect_uri=???
                                    // redirect_login();

                                    ShowTip("请先登录！", "success", 1000);
                                    setTimeout(function () {
                                        window.location.href = "login.html"
                                    }, 1000);
                                }
                            }

						});
					},
					getTable: function() {
						var chart1 = echarts.init(document.getElementById('chart1'));

						option = {
							tooltip: {
								trigger: 'axis'
							},
							color: ['#5793f3', '#d14a61', '#EEC900', '#EE00EE', '#00EE00', '#282828'],
							legend: {
								data: ['月发出量', '月发入量', '月发出量同比', '月发出量环比', '月发入量同比', '月发入量环比']
							},
							grid: {
								y2: 140
							},
							dataZoom: {
								show: true,
								realtime: true,
								orient: 'vertical',
								start: 0,
								end: 100
							},
							xAxis: [{
								type: 'category',
								data: this.area, // ['碧江区','大龙经济开发区','德江县','江口县','石阡县','思南县','松桃县','铜仁高新区','万山区','沿河县','印江县','玉屏县']
								axisLabel: {
									interval: 0,
									rotate: 50 //-30度角倾斜显示  
								},
								splitLine: {
									show: true,
									lineStyle: {
										color: '#dddddd',
										type: 'dashed',
										width: 1
									}
								},
								splitArea: {
									show: true,
									areaStyle: {
										color: ['rgba(144,238,144,0.05)', 'rgba(135,200,250,0.05)']
									}
								},
							}],
							yAxis: [{
								type: 'value',
								name: '收发数量',
								axisLabel: {
									formatter: '{value} 件'
								},
								splitLine: {
									show: true,
									lineStyle: {
										color: '#dddfff',
										type: 'dotted',
										width: 1
									}
								},
								splitArea: {
									show: true,
									areaStyle: {
										color: ['rgba(205,92,92,0.05)', 'rgba(255,215,0,0.05)']
									}
								}
							}, {
								type: 'value',
								name: '百分比',
								axisLabel: {
									formatter: '{value} %'
								}
							}],
							series: [{
									name: '月发出量',
									type: 'bar',
									data: this.category1, //[5020,4900,4523,3600,2003,1600,5020,4900,4523,3600,2003,1600],
									barWidth: "20%"
								},
								{
									name: '月发入量',
									type: 'bar',
									data: this.category2, //[5020,4900,4523,3600,2003,1600,5020,4900,4523,3600,2003,1600],
									barWidth: "20%"
								},
								{
									name: '月发出量同比',
									type: 'line',
									yAxisIndex: 1,
									lineStyle: {
										normal: {
											type: 'dashed'
										}
									},
									data: this.category3, //[5020,4900,4523,5600,6003,1600,5020,4900,4523,5600,6003,1600]
								},
								{
									name: '月发出量环比',
									type: 'line',
									yAxisIndex: 1,
									lineStyle: {
										normal: {
											type: 'dashed'
										}
									},
									data: this.category4 //[6020,5900,5523,3600,2003,1600,6020,5900,5523,3600,2003,1600]
								},
								{
									name: '月发入量同比',
									type: 'line',
									yAxisIndex: 1,
									lineStyle: {
										normal: {
											type: 'dashed'
										}
									},
									data: this.category5 //[5000,5600,5023,3600,4003,1800,6020,5900,4523,3600,5003,1600]
								},
								{
									name: '月发入量环比',
									type: 'line',
									yAxisIndex: 1,
									lineStyle: {
										normal: {
											type: 'dashed'
										}
									},
									data: this.category6 //[6060,3900,4523,3700,2003,3600,6020,3900,5523,6600,2003,2600]
								}
							]
						};

						chart1.setOption(option);
					}
				}
			});
		</script>
	</body>

</html>